<template>
  <el-dialog
    title="添加标签"
    :visible.sync="showDialog"
    width="45%"
    @close="reset"
  >
    <el-form ref="ruleForm" :inline="true" :model="ruleForm" :rules="rules">
      <el-row type="flex" justify="space-between">
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            v-model="ruleForm.subject_id"
            placeholder="请选择"
            @change="clickItem"
          >
            <el-option
              v-for="item in subjectTree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录" prop="directory_id">
          <el-select
            v-model="ruleForm.directory_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in nowSubChildren[0].children"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-form-item label="标签名称" prop="tag_name">
          <el-input v-model="ruleForm.tag_name" placeholder="请输入标签名称" style="width:200px" size="medium" />
        </el-form-item>
        <el-form-item label="排序" prop="phone">
          <el-input-number v-model="ruleForm.sort" :min="1" :max="10" />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="是否显示" style="margin-right:130px" prop="is_show">
          <el-switch
            v-model="ruleForm.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="addSubject">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入请求
import { addSubjectTags, editSubject } from '@/api/tagInfo'
export default {
  name: 'AddSub',
  props: {
    subjectTree: {
      type: Array,
      required: true
    },
    nowSubChildren: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showDialog: false, // 弹出层
      ruleForm: { // 表单
        sort: 1, // 排序
        tag_name: '', // 标签名称
        subject_id: '', // 归属学科
        directory_id: '',
        is_show: '' // 归属目录
      },
      rules: { // 验证规则
        subject_id: [{ required: true, trigger: 'change', message: '归属学科必选' }],
        directory_id: [{ required: true, trigger: 'change', message: '归属目录必选' }],
        tag_name: [{ required: true, trigger: 'blur', message: '标签名称必填' }]
      }

    }
  },
  created() {
  },
  methods: {
    async  addSubject() { // 添加标签
      await this.$refs.ruleForm.validate()
      console.log(111)
      if (this.ruleForm.id) {
        await editSubject(this.ruleForm)
      } else {
        await addSubjectTags(this.ruleForm)
      }
      this.$message.success('操作成功！')
      this.$parent.getSubjectTags()
      this.showDialog = false
    },
    clickItem() { // 选择框发生改变触发事件
      this.ruleForm.directory_id = null
      this.nowSubChildren = this.subjectTree.filter(item => {
        if (item.id === this.ruleForm.subject_id) {
          console.log(item)
          return item
        }
      })
    },
    async  reset() { // 取消事件
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        sort: 1,
        tag_name: '', // 标签名称
        subject_id: '', // 归属学科
        directory_id: '' // 归属目录
      }
      this.showDialog = false
    }

  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
  background: #66b1ff;
 padding: 20px 20px 10px;
}
</style>
